<!-- 仔细阅读全文之后加上了注释和理解。。。-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Infomation</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body style="padding:50px">
    <!--data-toggle="modal" 代表以"modal"事件触发-->
    <!--data-target="#addModal"代表 事件的设置目标-->
    <!--一起使用就是代表data-target所指的元素以data-toggle指定的形式显示-->
    <button class="btn btn-info" id="add" data-toggle="modal" data-target="#addModal">新增</button>
    <button class="btn btn-info" id="delete">删除</button>
    <button class="btn btn-info" id="modify">编辑</button>
    <button class="btn btn-info" id="select">查询</button>

    <input type="text" id="selectById" placeholder="按工号查询">
    <input type="text" id="selectByName" placeholder="按姓名查询">

    <table class="table table-responsive">

        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr class="info">
                <td><input type="checkbox" name="box"></td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" name="box"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>1992-2-2</td>
            </tr>
            <tr class="info">
                <td><input type="checkbox" name="box"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>27</td>
                <td>1993-3-3</td>
            </tr>
            <tr class="warning">
                <td><input type="checkbox" name="box"></td>
                <td>1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>26</td>
                <td>1994-4-4</td>
            </tr>
        </tbody>

    </table>

    <!-- 增加模态框，点击“增加”的时候弹出表格 -->
     <!--static属性点击其他位置表格不消失-->
    <div class="modal" id="addModal" data-backdrop="static">
         <!--窗口声明-->
        <div class="modal-dialog">
             <!--内容声明-->
            <div class="modal=content">
                 <!--框的标题-->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">新增用户</h4>
                </div>

                <div class="modal-body">
                     <!-- 创建新增信息表格-->
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="工号" id="num">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="姓名" id="name">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="性别" id="sex">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="密码" id="passwd">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="年龄" id="age">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="出生日期" id="birthday">
                        </div>
                    </form>
                </div>

                <!-- 框的按钮 -->
                <div class="modal-footer">
                    <button class="btn btn-info add" data-dismiss="modal">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>


    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <script>
        var index = 0;

        //新增函数
        $('#add').click(function () {
            //变量需要用数组的形式保存 不能用单独的var变量
            var arr = [];
            var str = "";
            arr[0] = $('#num').val();
            arr[1] = $('#name').val();
            arr[2] = $('#sex').val();
            arr[3] = $('#passwd').val();
            arr[4] = $('#age').val();
            arr[5] = $('#birthday').val();
            if (index % 2 == 1) {
                str += "<tr class='warning'>";

            } else {
                str += "<tr class='info'>"
            }
            str += "<td><input type='checkbox' name='box'></td><td>" + arr[0] + "</td><td>" + arr[1] + "</td><td>" +
                arr[2] + "</td><td>" + arr[3] + "</td><td>" + arr[4] + "</td><td>" + arr[5] + "</td></tr>";

            $('#body').append(str);
            index++;
        });


        //删除函数
        $('#delete').click(function(){
            //定位每一个输入框中被checked的元素
            $('input[name="box"]:checked').each(function(){
                $(this).parent().parent().remove();
            });
        });

        //编辑函数
        $('#modify').click(function(){
            $("tbody").find("tr").each(function(){
                var td = $(this).children()[0];
                var input = $(td).children()[0];
                if (input.checked) {
                    $(this).children().slice(1).attr("contenteditable", "true");
                }
            });
        });

        //查询函数
        $('#select').click(function(){
            var id = $('#selectById').val();
            var name = $('#selectByName').val();
            var flag = 0;
            $("tbody").find("tr").each(function(){
                var sid = $($(this).children()[1]).text();
                var sname = $($(this).children()[2]).text();
                var ssex = $($(this).children()[3]).text();
                var spasswd = $($(this).children()[4]).text();
                var sage = $($(this).children()[5]).text();
                var sbirthday = $($(this).children()[6]).text();
                if( id == sid && name == sname || id == sid && name == "" || id == "" && name == sname){
                    alert(sid + "," + sname + "," + ssex + "," + spasswd + "," + sage + "," + sbirthday + ",");
                    flag = 1;
                }
            });
            if(flag == 0){
                alert("没有找到该用户！");
            }
        });
    </script>
</body>

</html>